<template>
  <div>
    <el-table
        :data="tableData"
        :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
        row-key="id"
        border
        max-height="510"
        @selection-change="handleSelectionChange">
      <el-table-column
          fixed
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名"
          sortable
          fixed
          width="160">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="昵称"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="belongOrgName"
          label="所属组织"
          sortable
          width="120">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="170">
      </el-table-column>
      <el-table-column
          prop="phoneNumber"
          label="电话"
          width="120">
      </el-table-column>
      <el-table-column
          v-if="false"
          prop="avatar"
          label="头像"
          width="130">
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar" fit="fill" style="width: 100px; height: 100px">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          :formatter="sexFormtter"
          width="60">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          :formatter="statusFormtter"
          width="80">
      </el-table-column>
      <el-table-column
          prop="gmtCreate"
          label="创建时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建人"
          width="80">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="390"
          label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '0' && forbiddenShow" type="warning" @click="changeUserStatus(scope.row.id, 1)" size="mini">禁用</el-button>
          <el-button v-else-if="forbiddenShow" type="success" @click="changeUserStatus(scope.row.id, 0)" size="mini">启用</el-button>
          <el-button v-if="editShow" type="primary" @click="editUser(scope.row.id)" size="mini">修改</el-button>
          <el-button v-if="permissionShow" type="primary" @click="assignRole(scope.row.id)" size="mini">分配角色</el-button>
          <el-button v-if="resetShow" type="primary" @click="resetUserPwd(scope.row.id)" size="mini">重置密码</el-button>
          <el-button v-if="delShow" type="danger" @click="deleteUser(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageC
        :top-level="topLevel"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
        :pageSize="pageSize"
        :total="total"
        :currentPage="currentPage"></PageC>
    <UserRoleDialog></UserRoleDialog>
  </div>
</template>

<script>
import PageC from "@/components/PageC";
import UserRoleDialog from "@/components/dialog/UserRoleDialog";
import {deleteUserById, getUsers, editUserStatus} from "@/api/user";
import {Message} from "element-ui";
export default {
  name: "UserTable",
  components: {PageC, UserRoleDialog},
  data() {
    return {

    }
  },
  props: {
    topLevel: {
      required: false,
      default: -1,
      type: Number
    },
    editShow: {
      required: true,
      default: false,
      type: Boolean
    },
    resetShow: {
      required: true,
      default: false,
      type: Boolean
    },
    delShow: {
      required: true,
      default: false,
      type: Boolean
    },
    permissionShow: {
      required: true,
      default: false,
      type: Boolean
    },
    forbiddenShow: {
      required: true,
      default: false,
      type: Boolean
    }
  },
  computed: {
    tableData: {
      get() {
        return this.$store.state.user.tableData;
      },
      set(value) {
        this.$store.state.user.tableData = value;
      }
    },
    // 选中行id
    multipleSelection: {
      get() {
        return this.$store.state.user.multipleSelection;
      },
      set(value) {
        this.$store.state.user.multipleSelection = value;
      }
    },
    total: {
      get() {
        return this.$store.state.user.total;
      },
      set(value) {
        this.$store.state.user.total = value;
      }
    },
    pageSize: {
      get() {
        return this.$store.state.user.pageSize;
      },
      set(value) {
        this.$store.state.user.pageSize = value;
      }
    },
    currentPage: {
      get() {
        return this.$store.state.user.currentPage;
      },
      set(value) {
        this.$store.state.user.currentPage = value;
      }
    }
  },
  methods: {
    statusFormtter(row) {
      return row.status === "0" ? "正常":"禁用"
    },
    sexFormtter(row) {
      return row.sex === "0" ? "男":"女"
    },
    changeUserStatus(id, status) {
      var params = {
        id: id,
        status: status
      }
      editUserStatus(params).then(() => {
        this.getUsers();
      })
    },
    getUsers() {
      var params = {
        "current": this.currentPage,
        "size": this.pageSize
      };
      getUsers(params).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      })
    },
    editUser(userId) {
      this.$store.dispatch("user/editUser", userId)
    },
    assignRole(userId) {
      this.$store.dispatch("user/assignRole", userId);
    },
    deleteUser(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUserById(id).then((res) => {
          Message.success(res.data.msg);
          this.getUsers();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {return item.id;})
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getUsers();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUsers();
    }
  },
  mounted() {
    if (this.$getButtonAuth('menu:page')) {
      this.getUsers();
    }
  }
}
</script>

<style scoped>
</style>
